<template>
	<view style="background-image: url(../../static/index_bg.png)" class="all">
		<view class="body">
			<image src="../../static/login/loginbg3.png" mode=""></image>
			<view class="title">
				<p>Welcome</p>
				<p>卡尔为你提供优质体验</p>
			</view>
			<view class="input">
				<view class="input_body">
					<p class="inputTitle">手机号码</p>
					<p class="inputP bor">
						<input type="text" placeholder="请输入手机号码" v-model="userNumber" @blur="checkNum" />
						<view style="color: red">
							{{ wrongStyle ? "" : "您输入的电话有误" }}
						</view>
					</p>

					<p class="inputTitle">手机验证码</p>
					<p class="code bor">
						<input type="text" placeholder="请输入验证码" />
						<text class="getCode" :class="{ noClick: clikcCD }" @click="yanZheng">
							{{ codeMsg }} 获取验证码
						</text>
					</p>
				</view>
			</view>
			<view class="btn" @click="toIndex"> 登录 </view>
		</view>
	</view>
</template>


<script>
	// import { createNamespacedHelpers } from "vuex";
	// const { mapActions, mapState } = createNamespacedHelpers("login");
	// import { getUserToken } from "../../api/apis";
	export default {
		data() {
			return {
				userNumber: "",
				wrong: false, //电话号码是否错误
				clikcCD: false, //在一分钟内不可再次点击
				codeMsg: "", //一分钟内不可再点的提示
				wrongStyle: true,
			};
		},
		// methods: {
		//   ...mapActions(["getToken", "getCode", "wxLogin"]),
		//   checkNum() {
		//     //验证手机号
		//     const reg = /^1[35789]\d{9}$/;
		//     this.wrong = reg.test(this.userNumber) ? true : false;
		//     this.wrongStyle = this.wrong;
		//   },
		//   //跳转登录页
		//   async toIndex() {
		//     wx.switchTab({
		//       url: "../index/index",
		//     });
		//   },
		//   //获取验证码
		//   yanZheng() {
		//     if (this.clikcCD) return; //如果正在cd  直接跳出

		//     if (!this.wrong) {
		//       //判断手机号格式
		//       wx.showToast({
		//         title: "手机号有误",
		//         icon: "loading",
		//         duration: 1000,
		//       });
		//       return;
		//     } else {
		//       //不在cd 并且号码正确 请求验证码

		//       this.clikcCD = true;
		//       let sec = 59;
		//       this.codeMsg = sec + "秒后可以";
		//       const val = setInterval((e) => {
		//         sec -= 1;
		//         this.codeMsg = sec + "秒后可以";
		//         if (sec < 1) {
		//           clearInterval(val);
		//           this.codeMsg = "";
		//           this.clikcCD = false;
		//         }
		//       }, 1000);
		//     }
		//   },
		// },
		// async onLoad() {
		//   wx.hideShareMenu();

		//   wx.request({
		//     url: "http://funvalue.top:23323/goods/getAllGoods",
		//     header: {
		//       token:
		//         "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJjYXIiLCJhdWQiOiJtYXBwIiwiaXNzIjoiemh1anVueGluIiwiZXhwIjoxNjE5OTI0Njk3LCJpYXQiOjE2MTkzMTk4OTcsInVzZXIiOiJ7XCJhY2NvdW50XCI6XCIxNzUwMTY2MzE5NVwiLFwiaWRcIjozOCxcImlzX3ZpcFwiOjAsXCJyb2xlXCI6XCJ1c2VyXCJ9In0.jmt1-6FUa0MIqXa87jx4BTdxEG8YBL7eM6PkcJTILZ8",
		//     },
		//     success(e) {
		//       console.log(e, "获取所有成功");
		//     },
		//     fail(e) {
		//       console.log(e, "获取所有失败");
		//     },
		//   });

		//   //检查本地token
		//   const getTokenSuccess = await this.getToken();
		//   if (getTokenSuccess.code) {
		//   } else {
		//     //没有本地token 请求token
		//     await this.getCode();
		//   }
		//   //获取验证码
		// },
		// computed: {
		//   ...mapState(["code"]),
		// },
		// watch: {
		//   //code发生变化 说明拿到了code  发送到服务器
		//   async code() {
		//     console.log(this.code, "----------");
		//     const token = await this.wxLogin({ url: this.code });
		//     console.log(token);
		//   },
		// },
	};
</script>

<style scoped>
	.wrongStyle {
		border: 1px solid rgb(255, 49, 49);
	}

	.bor {
		border-bottom: 1px solid #eee;
	}

	.code {
		display: flex;
	}

	input {
		color: white;
	}

	.code input {
		flex: 3;
	}

	.inputTitle {
		margin: 40rpx 0;
		font-size: 32rpx;
		color: #d1d1d1;
	}

	.getCode {
		flex: 3;
		color: gainsboro;
		text-align: right;
	}

	.inputP {
		margin-bottom: 60rpx;
	}

	.body {
		height: 100vh;
		padding: 60rpx;
		padding-top: 260rpx;

	}

	.body image {
		width: 750rpx;
		height: 100vh;
		position: fixed;
	}

	.title {
		font-size: 60rpx;
		color: white;
	}

	.title p:last-child {
		font-size: 40rpx;
		margin-top: 60rpx;
		margin-bottom: 130rpx;
		color: rgb(172, 172, 172);
	}

	.input {
		margin-bottom: 180rpx;
	}

	.btn {
		width: 618rpx;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 88rpx;
		background-color: #d80000;
		color: white;
		font-size: 40rpx;
	}

	.all {
		background-repeat: no-repeat;
		background-position: bottom;
		background-color: #09090a;
		background-size: 100% 70%;
	}
</style>
